/**
 * 角色详情对话框函数
 * @param { Array } role 角色列表
 */
 export default function dialogBox(role) {
    // 存储对话框
    const dixlogBox = ('#dialog-box');

    // 为对话框设置角色信息内容
    dixlogBox.html(`
        <div class="close-dialog">&times;</div>
        <div class="thumbnail">
            <img src="${role.roleThumbnail}" alt="头像">
        </div>
        <div class="detail">
            <div class="detail-line">
                <div>编号：</div>
                <div>pokemon-${role.role_id}</div>
            </div>
            <div class="detail-line">
                <div>名称：</div>
                <div class="detail-line-name">${role.roleName}</div>
            </div>
            <div class="detail-line">
                <div>系列：</div>
                <div>${role.roleSeries}</div>
            </div>
            <div class="detail-line">
                <div>技能：</div>
                <div>${role.roleSkills.join('、')}</div>
            </div>
            <div class="detail-line">
                <div>创建时间：</div>
                <div>${role.create_date}</div>
            </div>
        </div>
    `);

    // 显示对话框
    dixlogBox.fadeIn(600);
    // 创建遮罩层
    dixlogBox.before(`<div class="dialog-masklayer"></div>`);

    // 关闭对话框事件
    dixlogBox.children('.close-dialog').click(function() {
        // 当前对话框主体
        const $thisParent = $(this).parent();

        // 定义关闭时间
        const closeTime = 100;

        // 分别淡出对话框和遮罩层
        $thisParent.fadeOut(closeTime);
        $thisParent.prev('.dialog-masklayer').fadeOut(closeTime)

        setTimeout(function() {
            $thisParent.prev('.dialog-masklayer').remove();
            $thisParent.empty();
        }, closeTime);
    });
}
